<template>
	<div class="heightMax order flexPublic" v-loading='tableLoading'>
		<div class="roleTopBox">
			<el-row>
				<el-col :span="5">
					<span class="font14">关键词：</span>
					<el-input v-model.trim="roleCount" @keyup.enter.native="getTableList(1)" placeholder="请输入用户账号/人员姓名搜索" clearable
					 size="mini" class='speInput'></el-input>
				</el-col>
				<el-col :span="5">
					<span class="font14">用户类型：</span>
					<el-select v-model="userType" placeholder="请选择用户类型" size="mini" filterable clearable>
						<el-option v-for="item in userArr" :key="item.role" :label="item.name" :value="item.role">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="5">
					<span class="font14">所属单位：</span>
					<el-select v-model="companyType" placeholder="请选择所属单位" size="mini" filterable clearable>
						<el-option v-for="item in companyArr" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-col>
				<!-- <el-col :span="7">
					<span class="font14">人员姓名：</span>
					<el-input v-model.trim="roleName" @keyup.enter.native="getTableList" placeholder="请输入人员姓名" size="mini" class='speInput'></el-input>
				</el-col> -->
				<el-col :span="2">
					<el-button type="primary" icon="el-icon-search" size="mini" @click='getTableList(1)'>搜索</el-button>
					<el-button icon="el-icon-delete" size="mini" @click='reset'>重置</el-button>
				</el-col>
				<el-button type="danger" icon="el-icon-delete" size="mini" class='fr' :disabled="isDisabled" @click='deleteUser'
				 v-if="deleteBtnShow">删除</el-button>
				<el-button type="primary" icon="el-icon-edit" size="mini" class='fr' :disabled="isDisabled" @click='compileRole'
				 v-if="complieBtnShow">编辑</el-button>
				<el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" class='fr' @click='addRole' v-if="addBtnShow">新增</el-button>
			</el-row>
		</div>
		<div class="roleBottomBox">
			<div class="listName">
				<i></i><span class="font14">用户列表</span>
			</div>
			<div class="tableBox">
				<vueScroll>
					<el-table :data="tableData" highlight-current-row ref="moviesTable" @row-click="rowClick" @selection-change="selectChange"
					 style="width: 100%" border header-row-class-name='tableHeader'>
						<el-table-column type="index" class="over" fixed>
						</el-table-column>
						<el-table-column type="selection" min-width="50" fixed>
						</el-table-column>
						<el-table-column label="人员姓名" min-width="150">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.real_name" placement="top">
									<span class="speSpan">{{scope.row.real_name}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="用户账号">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.username" placement="top">
									<span class="speSpan">{{scope.row.username}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="所属部门">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.department" placement="top">
									<span class="speSpan">{{scope.row.department}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="用户状态">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.is_activeType" placement="top">
									<span class="speSpan">{{scope.row.is_activeType}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="用户类型">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.roleName" placement="top">
									<span class="speSpan">{{scope.row.roleName}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="电话">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.phone" placement="top">
									<span class="speSpan">{{scope.row.phone}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="所属单位">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.company_name" placement="top">
									<span class="speSpan">{{scope.row.company_name}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="创建时间">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.date_joined" placement="top">
									<span class="speSpan">{{scope.row.date_joined}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="最后更新人">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.update_by_user" placement="top">
									<span class="speSpan">{{scope.row.update_by_user}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="备注">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.desc" placement="top">
									<span class="speSpan">{{scope.row.desc}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="查看详情" v-if="readDataShow">
							<template slot-scope="scope">
								<span class="eleBlueColor font13 cursor" @click="roleDetail(scope.row.id)">查看</span>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页器 -->
					<div class="pag">
						<el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
						 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
						</el-pagination>
					</div>
				</vueScroll>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		AllLoading
	} from "@/common.js";
	export default {
		activated() {
			if (localStorage.RoleManagementFlush) {
				this.getTableList()
				localStorage.removeItem('RoleManagementFlush')
			}
			if (localStorage.searchUserCountManage) {
				let id = JSON.parse(localStorage.searchUserCountManage).id
				if (id == 2) {
					this.userType = 10
				}else if(id == 3){
					this.userType = 30
				}else if(id == 4){
					this.userType = 40
				}
				localStorage.removeItem('searchUserCountManage')
				this.getTableList()
			}
		},
		mounted() {
			this.getPermition()
			this.getSearch()
		},
		data() {
			return {
				roleCount: '',
				roleName: '',
				tableData: [],
				page: 1,
				page_size: 10,
				total: 0,
				isDisabled: true,
				tableLoading: false,
				checkArr: [],
				currentId: '',
				pidsArr: [],
				addBtnShow: false,
				complieBtnShow: false,
				deleteBtnShow: false,
				readDataShow: false,
				userType: '',
				userArr: [],
				companyType: '',
				companyArr: []
			}
		},
		computed: {
			yonghuArr() {
				if (localStorage.xiTong) {
					let arr = JSON.parse(localStorage.xiTong).list
					return arr.filter((item) => {
						return item.name == '用户管理'
					})
				} else {
					return []
				}
			}
		},
		methods: {
			getSearch() {
				axiosGet('/user/user/param/', {}, (res) => {
					this.userArr = res.detail.role
					this.companyArr = res.detail.company
					this.getTableList()
				})
			},
			getPermition() {
				if (this.yonghuArr.length != 0) {
					if (this.yonghuArr[0].pids) {
						this.pidsArr = this.yonghuArr[0].pids
					}
				}
				if (this.pidsArr.length > 0) {
					this.pidsArr.map((item) => {
						if (item.desc == 'get') {
							this.readDataShow = true
						}
						if (item.desc == 'put') {
							this.complieBtnShow = true
						}
						if (item.desc == 'delete') {
							this.deleteBtnShow = true
						}
						if (item.desc == 'post') {
							this.addBtnShow = true
						}
					})
				}
			},
			//获取列表数据
			getTableList(val) {
				if (val) {
					this.page = 1
					this.page_size = 10
				}
				this.tableLoading = true
				let params = {
					page: this.page,
					page_size_count: this.page_size,
					key_words: this.roleCount,
					role: this.userType,
					company: this.companyType
					// username:this.roleCount
				}
				axiosGet('/user/user/', params, (res) => {
					this.tableLoading = false
					if (res.code == 0) {
						this.total = res.detail.count
						this.tableData = res.detail.results
						this.tableData.map((item) => {
							if (item.is_admin) {
								if (item.role == 0) {
									item.roleName = '平台管理员'
								} else if (item.role == 10) {
									item.roleName = '维保人员'
								} else if (item.role == 20) {
									item.roleName = '维保单位'
								} else if (item.role == 30) {
									item.roleName = '使用单位'
								} else if (item.role == 40) {
									item.roleName = '监管单位'
								}
							} else {
								if (item.role == 0) {
									item.roleName = '平台管理员'
								} else if (item.role == 10) {
									item.roleName = '维保人员'
								} else if (item.role == 20) {
									item.roleName = '维保单位'
								} else if (item.role == 30) {
									item.roleName = '使用单位'
								} else if (item.role == 40) {
									item.roleName = '监管单位'
								}
							}
							if (item.is_active) {
								item.is_activeType = '正常'
							} else {
								item.is_activeType = '禁用'
							}
						})
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//重置
			reset() {
				this.userType = ''
				this.roleCount = ''
				this.roleName = ''
				this.page = 1
				this.page_size = 10
				this.getTableList()
			},
			deleteUser() {
				this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let url = '/user/user/' + this.currentId + '/'
					axiosDelete(url, {}, (res) => {
						if (res.code == 0) {
							this.$message({
								type: 'success',
								message: '删除成功'
							})
							this.getTableList()
						} else {
							this.$message.error(res.detail.result)
						}
					})
				}).catch(() => {

				});
			},
			//单行点击
			rowClick(row, column) {
				this.$refs.moviesTable.toggleRowSelection(row)
			},
			//多选变化
			selectChange(res) {
				if (res.length == 1) {
					this.isDisabled = false
					this.checkArr = res
					this.currentId = this.checkArr[0].id
				} else {
					this.isDisabled = true
				}
			},
			//每页数量变化
			handleSizeChange(size) {
				this.page_size = size
				this.getTableList()
			},
			//页数变化
			handleCurrentChange(page) {
				this.page = page
				this.getTableList()
			},
			//新增角色
			addRole() {
				let obj = {
					newLabel: '新增用户',
					index: '/MainView/SystemManagement/AddRoleCount'
				}
				this.$store.commit('ADDTAB', obj)
				this.$router.push({
					name: 'AddRoleCount'
				})
			},
			//编辑角色
			compileRole() {
				localStorage.roleCurrentId = JSON.stringify({
					id: this.currentId
				})
				let obj = {
					newLabel: '编辑用户',
					index: '/MainView/SystemManagement/ComplieRoleCount'
				}
				this.$store.commit('ADDTAB', obj)
				this.$router.push({
					name: 'ComplieRoleCount'
				})
			},
			//角色详情
			roleDetail(id) {
				localStorage.roleCurrentId = JSON.stringify({
					id: id
				})
				let obj = {
					newLabel: '用户详情',
					index: '/MainView/SystemManagement/RoleCountDetail'
				}
				this.$store.commit('ADDTAB', obj)
				this.$router.push({
					name: 'RoleCountDetail'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.el-row {
		width: 100%;
		margin-bottom: 0 !important;
	}

	.el-col {
		display: flex;
		align-items: center;

		span {
			float: left;
		}
	}

	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		height: 25px;
		align-items: center;

		i {
			width: 3px;
			height: 60%;
			background: #2d8cf0;
			margin: 10px 5px;
			margin-left: 0;
		}

	}

	.el-select {
		width: 60%;
	}
</style>
